<template>
	<div class="show">
		<div class="musicall">

			<div class="musicone" v-for="(val,index) in shows" :key="val.programId">
				<div class="box">
					<div class="xuhao">
						<p>{{index+1}}</p>
					</div>
					<div class="boxtitle">
						<h2>{{val.programName}}</h2>
						
					</div>
				</div>
				<div class="icons">

					<i @click="playmusic(val.id)"class="iconfont icon-bofang"></i>
					<i class="iconfont icon-dashujukeshihuaico-"></i>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"show",
		data(){
			return{
				shows:JSON.parse(localStorage.getItem("shows"))?JSON.parse(localStorage.getItem("shows")):""
			}
		},
		created(){
			console.log(this.shows)
			this.shows=JSON.parse(localStorage.getItem("shows"))
		},
		methods:{
			playmusic(id){
				this.$router.push({
					name:"musicPlayPage",
					params:{
						mid:id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	
	.show{
		.musicall {
			width: 100%;
			background-color: white;
			padding: vw(10) vw(16);
			.musicone {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: vw(10) 0;
				.box {
					.xuhao {
						width: vw(20);
						text-align: center;
						display: inline-block;
						vertical-align: middle;
						p {
							color: #999;
							font-size: vw(14);
						}
					}
					.boxtitle {
						margin-left: vw(16);
						display: inline-block;
						vertical-align: middle;
						h2 {
							width: vw(180);
							font-size: vw(14);
							color: #000;
							font-weight: 500;
							margin: 0 0 vw(2);
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							
						}
						p {
							font-size: vw(10);
							color: #999;
						}
					}
				}
				.icons {
					display: flex;
					align-items: center;
					color: #999;
					i {
						font-size: vw(24);
						margin: 0 0 0 vw(10);
					}
					i:nth-child(2) {
						font-size: vw(32);
					}
				}
			}
		}
	}
	

</style>